<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>iLEADER</title>
  <link rel="stylesheet" href="../dist/lib/layui/css/layui.css">
  <link rel="stylesheet" href="../dist/lib/myshare/share.min.css">
  <link rel="stylesheet" href="../dist/css/main.css">
</head>
<body>
<!-- header start -->
<div class="ileader-header">
  <div class="ileader-main layui-clear">
    <a href="index.html" class="logo"><img src="../dist/images/logo.png" alt=""></a>
    <ul class="nav-list">
      <li class="list-item"><a href="#">下载APP</a></li>
      <li class="list-item">
        <form class="layui-form search-box">
          <div class="layui-input-inline">
            <input type="text" name="seachInfo" class="layui-input search-input" placeholder="搜索课程信息" autocomplete="off">
          </div>
          <button class="layui-btn layui-btn-normal search-btn" lay-submit lay-filter="formDemo"></button>
        </form>
      </li>
      <!-- 登录前 -->
      <li class="list-item">
        <a href="javascript:;" class="js-header-register">注册</a> / <a href="javascript:;" class="js-header-signIn">登录</a>
      </li>
      <li class="list-item item-user">
        <span class="user-head"><img src="../dist/images/user_head.png" class="" alt=""></span>
      </li>
      <!-- 登录后 -->
      <!--<li class="list-item list-item-after">-->
      <!--<a href="m-news.html" class="user-news active">消息</a>-->
      <!--<a href="m-online-course.html">个人中心</a>-->
      <!--</li>-->
      <!--<li class="list-item item-user">-->
      <!--<span class="user-name">黑眼圈圈</span>-->
      <!--<span class="user-head"><img src="../dist/images/user_head.png" alt=""></span>-->
      <!--</li>-->
    </ul>
  </div>
</div>
<!-- header start-->

<!-- content start-->
<div class="course-details-floor">
  <div class="ileader-main">
    <div class="course-details-info mb-15">
      <div class="pic"><img src="https://img4.mukewang.com/5b86566a0001d31106000338-240-135.jpg" alt=""></div>
      <div class="info-content">
        <div class="info-title">python数据分析与机器学习实战使用与机器学习实战使用与机器学习实战使用</div>
        <div class="info-show">
          <span class="number">10万+人学过</span>
          <div class="star-box">
            <div class="box-inner" style="width: 60%"></div>
            <!-- 我的评分 -->
            <div class="star-rate">
              <div class="rate-title">我的评分</div>
              <div class="rate-bar" data-id="1" data-val="2"></div>
            </div>
          </div>
        </div>
        <div class="info-price"><span class="color-red">￥200</span></div>
        <div class="info-op">
          <a href="javascript:;" class="layui-btn layui-btn-radius layui-bg-orange js-btn-buy">加入学习</a>
          <!-- 购买后 -->
          <a href="#" class="layui-btn layui-btn-radius layui-btn-normal">开始学习</a>
        </div>
      </div>
      <div class="info-bar">
        <a href="javascript:;" class="js-store-btn on" data-id="1" data-store="1"><i class="icon icon-store"></i>已收藏</a>
        <a href="javascript:;" class="js-share-btn"><i class="icon icon-share"></i>分享</a>
      </div>
    </div>
    <div class="course-details-main layui-clear">
      <div class="course-main-wrap">
        <div class="course-sub-nav">
          <a href="e-online-detail.html">课程介绍</a>
          <a href="e-online-detail-catalog.html">目录</a>
          <a href="e-online-detail-comment.html" class="active">评论</a>
        </div>
        <div class="course-main">
          <div class="comment-modular" id="commentApp">
            <!-- 总评论的内容 -->
            <div class="comment-modular-header">
              <div class="s-fl user-avatar"><img src="../dist/images/user_avatar1.png" alt=""></div>
              <div class="comment-publish">
                <div class="cp-box">
                  <textarea class="cp-text" v-model="commentModel"></textarea>
                </div>
                <div class="s-tr cp-op">
                  <button class="layui-btn layui-btn-radius btn-publish"
                          @click="handlePublishComment">发布</button>
                </div>
              </div>
            </div>
            <!-- 评论细节 -->
            <div class="comment-list" v-if="commentList && commentList.length">
              <comment-item v-for="item in commentList" :key="item.id" :course-id="id" :comment="item"></comment-item>
            </div>
            <!-- 没有内容时提示 -->
            <div class="ileader-task-tips" v-if="(!commentList || !commentList.length) && !isLoading">
              <i class="layui-icon">&#xe6af;</i>
              什么都没有，快去添加一个评论
            </div>
            <!-- 加载中 -->
            <div class="s-tc" style="padding: 10px 0" v-if="isLoading">
              <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
            </div>

            <div class="ileader-page pb-20 s-tc" id="comment_page" v-show="commentList && commentList.length"></div>
          </div>
        </div>
      </div>
      <div class="course-aside-wrap">
        <div class="aside-hd">
          <div class="title">授课老师</div>
        </div>
        <div class="aside-bd">
          <div class="teacher-info">
            <a href="e-teacher-detail.html" target="_blank" class="item-link layui-clear">
              <div class="item-pic"><img src="https://img.mukewang.com/5b2a0c4d0001029d09600960-100-100.jpg" alt=""></div>
              <div class="item-content">
                <div class="item-name">香蕉老师</div>
                <div class="item-info">一款人人都爱的车，浑身都是亮点一款人人都爱的车，浑身都是亮点.....</div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- content end-->

<!-- footer start-->
<div class="footer-warp">
  <div class="footer-nav">
    <a href="#">关于我们</a>
    <a href="#">联系我们</a>
    <a href="#">帮助中心</a>
    <a href="javascript:;" class="ewm-link">
      <span>订阅号</span>
      <div class="ewm-box">
        <p>扫描二维码关注<br>iLeader微信服务号</p>
        <img src="../dist/images/ewm.png" alt="">
      </div>
    </a>
  </div>
  <div class="copyright">京ICP证030173号-1   京网文【2013】0934-983号     ©2019Baidu</div>
</div>
<!-- footer end-->

<!-- 评论组件 -->
<script type="text/html" id="commentItem">
  <div class="list-item">
    <div class="s-fl item-avatar" v-if="!isReply">
      <img :src="comment.userImg" alt="">
    </div>
    <div class="item-content">
      <div class="cp-info">
        <a href="javascript:;" class="user-name">{{comment.userName}}：</a>
        <a href="javascript:;" class="user-name"
           v-if="isReply && comment.isReplyReply">
          @{{comment.replyUserName}} &nbsp;
        </a>
        {{comment.content}}
      </div>
      <div class="cp-func">
        <div class="s-fl cp-time">{{comment.commentTime}}</div>
        <div class="s-fr cp-handle">
          <span class="btn-flag" v-if="comment.isTop">置顶</span>
          <a href="javascript:;" class="btn-replay"
             @click="handleReplyBtnClick">回复</a>
          <a href="javascript:;" class="btb-store"
             :class="{'on': comment.isFavorite}"
             @click="handleFavoriteBtnClick">
            <i class="icon icon-store"></i>
            {{comment.isFavorite ? '已收藏' : '收藏'}}
          </a>
          <a href="javascript:;" class="btn-praise"
             :class="{'on': comment.isPraise}"
             @click="handlePraiseBtnClick">
            <i class="icon icon-praise"></i>
            {{comment.praiseCount ? comment.praiseCount : '赞' }}
          </a>
        </div>
        <div class="comment-publish layui-clear" v-if="visibleCommentInput">
          <div class="cp-box">
            <textarea class="cp-text" ref="commentInput" v-model="commentModel"></textarea>
          </div>
          <div class="s-tr cp-op">
            <button class="layui-btn layui-btn-radius btn-publish"
                    @click="handlePublishComment">发布</button>
          </div>
        </div>
      </div>
      <div class="comment-inner-list" v-if="!isReply && (replyList.length || comment.replyCount)">
        <comment-item v-for="(item, index) in replyList" :key="item.id"
          v-if="replyList"
          :comment="item"
          :course-id="courseId"
          :reply-comment-id="comment.id"
          :is-reply="true" @reply-reply="handleReplyReply">
        </comment-item>
        <!-- 加载中 -->
        <div class="s-tc" style="padding: 10px 0" v-if="isLoading">
          <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
        </div>
        <!-- 显示更多 -->
        <div class="list-item list-more" v-if="!displayAll && comment.replyCount">
          <div class="item-content">
            <div class="cp-info">
              <a href="javascript:;" class="btn-more" @click="handleShowAllReply">共{{comment.replyCount}}条回复</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>
<script src="../dist/lib/jquery.min.js"></script>
<script src="../dist/lib/vue.min.js"></script>
<script src="../dist/lib/layui/layui.js"></script>
<script src="../dist/lib/myshare/jquery.share.min.js"></script>
<script src="../dist/js/popup_all.js"></script>
<script src="../dist/js/c_online.js"></script>
<script src="../dist/js/c_comment.js"></script>
</body>
</html>